<style>
.container {
  margin: 0 auto;
  width: 500px;
  height: 800px;
  background: #353535;
}

video {
  width: 500px;
  height: 600px;
  transform: scaleX(-1); /* 水平翻转 */
}

canvas {
  width: 100%;
  height: 300px;
}

button {
  width: 100px;
  height: 40px;
  position: relative;
  bottom: 0;
  left: 0;
  background-color: rgb(22, 204, 195);
}

.img_bg_camera {
  img {
    width: 500px;
    height: 800px;
  }
}

.publish {
  color: #fff;

  video {
    //width: 100%;
    //height: 100vh;
  }

  div {
    //position: absolute;
    left: calc(50% - 80px);
    bottom: 0;
    height: 40px;
    width: 160px;
    font-size: 14px;
    border-radius: 10px;
    line-height: 40px;
    background-color: rgb(25, 179, 179);
    text-align: center;
  }
}
</style>

<template>
  <div id="app">
    <div class="container">
      <van-icon color="white" name="cross" size="30" style="float: left; padding: 10px;" @click="CloseCamera"/>
      <video ref="video"></video>
      <canvas id="canvasCamera" style="display: none"></canvas>
      <div v-if="imgSrc" class="img_bg_camera">
        <img :src="imgSrc" class="tx_img"/>
      </div>

      <div class="publish">
        <!-- 下载按钮 -->
        <a id="downLoadLink" style="display: none;"></a>
<!--        <video ref="video"></video>-->
      </div>
      <van-button size="mini" type="default" @click="paizhao()">拍照</van-button>
      <van-button size="mini" type="default" @click="luxiang()">录像</van-button>
      <van-button size="mini" type="default" @click="">上传视频</van-button>
      <van-icon :name="iocnName" color="white" size="4rem"
                style="margin:0 auto; display: block; padding: 10px; margin-top: 30px;" @click="setImage()"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iocnName: "photograph",
      mediaStreamTrack: {},
      video_stream: '', // 视频stream
      recordedBlobs: [], // 视频音频 blobs
      isRecord: false, // 视频是否正在录制
      imgSrc: '', // 拍照图片
      canvas: null,
      context: null,
    }
  },
  mounted() {
    // 进入页面 自动调用摄像头
    this.getCamera();
  },
  methods: {
    luxiang() {
      this.iocnName = "stop-circle-o";
    },
    paizhao() {
      this.iocnName = "photograph";
      this.getCamera();
    },
    // 拍照 绘制图片
    setImage() {
      if (this.iocnName == "photograph") {
        console.log('拍照');
        // 点击canvas画图
        this.context.drawImage(
            this.$refs.video,
            0,
            0,
            200,
            100,
        );
        // 获取图片base64链接
        const image = this.canvas.toDataURL('image/png');
        this.imgSrc = image;
        this.$emit('refreshDataList', this.imgSrc);
      } else {
        if (this.isRecord) {
          this.stop();
        } else {
          this.record();
        }
      }
    },
    // 打开摄像头
    OpenCamera() {
      this.getCamera();
    },
    // 关闭摄像头
    CloseCamera() {
      console.log('关闭摄像头');
      if (this.$refs.video && this.$refs.video.srcObject) {
        this.$refs.video.srcObject.getTracks().forEach(track => track.stop());
      }
      this.mediaStreamTrack = null;
      this.video_stream = null;
      this.imgSrc = '';
      this.canvas = null;
      this.context = null;
      this.$router.push('/');
    },
    // 调用打开摄像头功能
    getCamera() {
      // 获取 canvas 画布
      this.canvas = document.getElementById('canvasCamera');
      this.context = this.canvas.getContext('2d');

      // 动态设置 canvas 大小
      const videoElement = this.$refs.video;
      this.canvas.width = videoElement.clientWidth;
      this.canvas.height = videoElement.clientHeight;

      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 正常支持版本
      navigator.mediaDevices
          .getUserMedia({
            video: true,
          })
          .then((stream) => {
            // 摄像头开启成功
            this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
            this.video_stream = stream;
            this.$refs.video.srcObject = stream;
            this.$refs.video.play();
          })
          .catch(err => {
            console.log(err);
          });
    },
    // 视频录制
    record() {
      console.log('record');
      this.isRecord = !this.isRecord;
      let mediaRecorder;
      let options;
      this.recordedBlobs = [];
      if (typeof MediaRecorder.isTypeSupported === 'function') {
        // 根据浏览器来设置编码参数
        if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
          options = {
            MimeType: 'video/webm;codecs=h264',
          };
        } else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
          options = {
            MimeType: 'video/webm;codecs=h264',
          };
        } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
          options = {
            MimeType: 'video/webm;codecs=vp8',
          };
        }
        mediaRecorder = new MediaRecorder(this.video_stream, options);
      } else {
        // console.log('isTypeSupported is not supported, using default codecs for browser');
        console.log('当前不支持isTypeSupported，使用浏览器的默认编解码器');
        mediaRecorder = new MediaRecorder(this.video_stream);
      }
      mediaRecorder.start();
      // 视频录制监听事件
      mediaRecorder.ondataavailable = e => {
        console.log(e);
        // 录制的视频数据有效
        if (e.data && e.data.size > 0) {
          this.recordedBlobs.push(e.data);
        }
      };
      // 停止录像后增加下载视频功能，将视频流转为mp4格式
      mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedBlobs, {type: 'video/mp4'});
        this.recordedBlobs = [];
        // 将视频链接转换完可以用于在浏览器上预览的本地视频
        const videoUrl = window.URL.createObjectURL(blob);
        // 设置下载链接
        document.getElementById('downLoadLink').href = videoUrl;
        // 设置下载mp4格式视频
        document.getElementById('downLoadLink').download = 'media.mp4';
        document.getElementById('downLoadLink').innerHTML = 'DownLoad video file';
        // 生成随机数字
        const rand = Math.floor((Math.random() * 1000000));
        // 生成视频名
        const name = `video${rand}.mp4`;

        // setAttribute() 方法添加指定的属性，并为其赋指定的值
        document.getElementById('downLoadLink').setAttribute('download', name);
        document.getElementById('downLoadLink').setAttribute('name', name);

        // 0.5s后自动下载视频
        setTimeout(() => {
          document.getElementById('downLoadLink').click();
        }, 500);
      };
    },
    // 停止录制
    stop() {
      this.isRecord = !this.isRecord;
      if (!this.$refs.video.srcObject) return;
      const stream = this.$refs.video.srcObject;
      const tracks = stream.getTracks();
      // 关闭摄像头和音频
      tracks.forEach(track => {
        track.stop();
      });
    },
  },
  created() {
    this.OpenCamera();
  }
}
</script>
